<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>地区人均消费图表</title>
	</head>
	<script  src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
	<script  src="{{ url_for('static',filename='js/china.js') }}"></script>
	<!--<script src="/static/js/china.js"></script>-->
	<!--<script src="/static/js/echarts.min.js"></script>-->
	<!--<script src="/static/js/jquery-3.1.1.min.js"></script>-->

	<body>
		<div id="main" style="width: 1000px;height:600px;"></div>
	</body>
	<script type="text/javascript">

		//1.右边的柱状图展示top10的数据
		//2.中国地图的颜色，人均消费超过800使用深红色

		var myChart = echarts.init(document.getElementById('main'));
		var data = [{% for i in local.keys() %} {name:"{{ i }}",value:{{ local[i] }}}, {% endfor %}];
		console.log(data)
		var yData = [];
		var barData = [];


		for(var i = 0; i < 10; i++) {
			barData.push(data[i])
			yData.push(i + data[i].name)
		}
		// console.log(data[data.length - 1].value)
		// console.log(data[0].value)
		var option = {
			title: [{
				show: true,
				text: '中国地区人均消费',
				textStyle: {
					color: '#2D3E53',
					fontSize: 18
				},
				right: 150,
				top: 100
			}],
			tooltip: {
				show: true,
				formatter: function(params) {
					return params.name + '：' + params.data['value'];
				},
			},
			visualMap: {
				type: 'continuous',
				orient: 'horizontal',
				itemWidth: 10,
				itemHeight: 80,
				text: ['高', '低'],
				showLabel: true,
				seriesIndex: [0],
				min: data[data.length - 1].value ,
				max: data[0].value ,
				inRange: {
					color: ['pink', '#FFFD64', '#FF5000']
				},
				textStyle: {
					color: '#7B93A7'
				},
				bottom: 30,
				left: 'left',
			},
			grid: {
				right: 10,
				top: 135,
				bottom: 100,
				width: '20%'
			},
			xAxis: {
				show: false
			},
			yAxis: {
				type: 'category',
				inverse: true,
				nameGap: 16,
				axisLine: {
					show: false,
					lineStyle: {
						color: '#ddd'
					}
				},
				axisTick: {
					show: false,
					lineStyle: {
						color: '#ddd'
					}
				},
				axisLabel: {
					interval: 0,
					margin: 85,
					textStyle: {
						color: '#455A74',
						align: 'left',
						fontSize: 14
					},
					rich: {
						a: {
							color: '#fff',
							backgroundColor: '#FAAA39',
							width: 20,
							height: 20,
							align: 'center',
							borderRadius: 2
						},
						b: {
							color: '#fff',
							backgroundColor: '#4197FD',
							width: 20,
							height: 20,
							align: 'center',
							borderRadius: 2
						}
					},
					formatter: function(params) {
						if(parseInt(params.slice(0, 1)) < 3) {
							return [
								'{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
							].join('\n')
						} else {
							return [
								'{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
							].join('\n')
						}
					}
				},
				data: yData
			},
			geo: {
				map: 'china',
				left: 'left',
				right: '300',
				label: {
					emphasis: {
						show: false
					}
				},
				itemStyle: {
					emphasis: {
						areaColor: '#fff464'
					}
				}
			},
			series: [{
				name: 'mapSer',
				type: 'map',
				roam: false,
				geoIndex: 0,
				label: {
					show: false,
				},
				data: data
			}, {
				name: 'barSer',
				type: 'bar',
				roam: false,
				visualMap: false,
				zlevel: 2,
				barMaxWidth: 8,
				barGap: 0,
				itemStyle: {
					normal: {
						color: function(params) {
							var colorList = [{
									colorStops: [{
										offset: 0,
										color: '#FFD119'
									}, {
										offset: 1,
										color: '#FFAC4C'
									}]
								},
								{
									colorStops: [{
										offset: 0,
										color: '#00C0FA'
									}, {
										offset: 1,
										color: '#2F95FA'
									}]
								}
							];
							if(params.dataIndex < 3) {
								return colorList[0]
							} else {
								return colorList[1]
							}
						},
						barBorderRadius: 15
					}
				},
				data: barData
			}]
		};

		myChart.setOption(option);
	</script>


</html>